<template>
    <div class='component component--layout layout--D1'>
        <header class="header header--secondary" v-if='props.titleName.name || props.titleName.info'>
            <h2 class="title" v-if="props.titleName.name">
                <a class="link">{{ props.titleName.name }}</a>
            </h2>
            <p class="paragraph" v-if="props.titleName.info">
                {{ props.titleName.info }}
            </p>
        </header>
        <div class="element element--article is-lead">
            <div class="article__content">
                <h3 class="article__headline" v-if="props.topContData.author">
                    <div class="head-link" @click="toPush(props.topContData)">
                        {{ props.topContData.headline }}
                    </div>
                </h3>
            </div>
        </div>
        <div class="column column--primary">
            <div class="element element--article is-lead" v-if="props.topContData.src">
                <figure class="article__figure">
                    <div class="figure__image" @click="toPush(props.topContData)">
                        <img class="lazyautosizes lazyloaded" :data-srcset="props.topContData.src" sizes="620px"
                            :srcset="props.topContData.src" v-if="props.topContData.src">
                        <img src="../../../assets/detail-noImg.png" v-else>
                    </div>
                </figure>
                <div class="article__content">
                    <h3 class="article__headline">
                        <router-link class="link">
                            Eurozone stocks are at their highest in 16 years. UBS now prefers Europe over U.S. equities.
                        </router-link>
                    </h3>
                </div>
            </div>
            <!-- 下面再放两张小图 -->
            <template v-if="props.topContData.smallTwoImg.length > 0">
                <div class="element element--article smallImg" v-for="(v, i) in props.topContData.smallTwoImg" :key="i">
                    <figure class="article__figure">
                        <div class="figure__image" @click="toPush(v)">
                            <img class="lazyautosizes" sizes="277px" :srcset="v.imgUrl" v-if="v.imgUrl">
                            <img src="../../../assets/noimg.png" v-else>
                        </div>
                    </figure>
                    <div class="article__content">
                        <h3 class="article__headline">
                            <div class="link" @click="toPush(v)">
                                {{ v.title }}
                            </div>
                        </h3>
                        <p class="article__summary">{{ v.symbol }}</p>
                    </div>
                </div>
            </template>
        </div>
        <div class="column column--aside">
            <div class="element element--article" v-for="(item, idx) in props.topContData.rightContData" :key="idx">
                <figure class="article__figure">
                    <div class="figure__image" @click="toPush(item)">
                        <img class="lazyautosizes" :data-srcset="item.imgUrl" siaes='120px' :srcset='item.imgUrl'
                            v-if="item.imgUrl">
                        <img src="../../../assets/noimg.png" v-else>
                    </div>
                </figure>
                <div class="article__content">
                    <h3 class="article__headline">
                        <div class="link" @click="toPush(item)">
                            {{ item.title }}
                        </div>
                    </h3>
                    <div class="content--secondary" v-if='item.symbol'>
                        <div class="group group--tickers">
                            <bg-quote :class="[item.value < 0 ? 'negative' : 'positive']">
                                <router-link class="ticker"
                                    :to="{ name: 'stockDetail', params: { symbol: item.symbol } }">
                                    <span class="ticker__symbol">{{ item.symbol }}</span>
                                    <bg-quote class="ticker__change">{{ item.value }}%</bg-quote>
                                    <i class="icon"></i>
                                </router-link>
                            </bg-quote>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
const titleTime1 = reactive([])
const props = defineProps(['titleName', 'topContData'])
import { useRouter } from 'vue-router'
const router = useRouter()
const toPush = (data) => {
    router.push({ name: 'NewDetail', params: { uuid: data.uuid, author: data.author } })
}
</script>
<style scoped lang='scss'>
.head-link {
    font: 800 2.625rem/1.125 Mulish, sans-serif
}

.paragraph {
    padding: 0
}

@media (min-width: 656px) {
    .smallImg {
        .article__figure {
            -webkit-flex: 0 0 277px;
            -ms-flex: 0 0 277px;
            flex: 0 0 277px;
            max-width: 277px;
            margin-right: 10px;
        }

        .article__headline {
            font-size: 1.5rem;
            font-weight: 700;
            display: block;
            line-height: 1.125;
            padding: 0
        }
    }
}
</style>